<script lang="ts" setup>
import {ref, watch, reactive} from 'vue'

// const user = reactive({id: 100, name: '李四', count: 0, teacher: {id: 99, name: '张老师'}})
const user = ref({id: 100, name: '李四', count: 0, teacher: {id: 99, name: '张老师'}})

// watch(() => user.value.teacher.name, (a, b) => {
//   console.log('侦听开始')
//   console.log(a)
//   console.log(b)
//   console.log('侦听结束')
// },)

watch(user, value => {
  console.log('侦听开始')
  console.log(value)
  console.log('侦听结束')
}, {deep: true})


</script>
<template>
  <button @click="user.count++">count++</button>
  <button @click="user.teacher.name='王老师'">修改user.teacher.name=王老师</button>
  <p>{{ user.id }}</p>
  <p>{{ user.name }}</p>
  <p>{{ user.count }}</p>
</template>
